<template>
    <div>
        <h1>News</h1>
        <div class="news">
            <ul>
                <li v-for="item in newsList" :key="item.id">
                    <RouterLink :to="{
                        path:'/news/detail',
                        query:{
                            id:item.id,
                            title:item.title,
                            content:item.content
                        }
                    }">
                    {{item.title}}
                </RouterLink>
                </li>
            </ul>
        </div>
        <div class="news-content">
            <RouterView></RouterView>
        </div>
    </div>
</template>

<script setup>
    import {reactive} from 'vue'
    import {RouterView} from 'vue-router'
    const newsList = reactive(
        [{
            id:"01",
            title:"很好的抗癌食物",
            content:"西兰花"
        },
        {
            id:"02",
            title:"如何一夜暴富",
            content:"黑马程序员"
        },
        {
            id:"03",
            title:"震惊，今天下雨了",
            content:"没带伞"
        },
        {
            id:"04",
            title:"好消息",
            content:"没有好消息"
        }
    ])

</script>

<style>


</style>
